<template>
  <div>
    <el-card class="box-card" :shadow="'never'">
      <el-form
        ref="thisForm"
        :model="thisForm"
        label-width="73px"
        label-position="right"
        inline
        @submit.native.prevent
      >
        <el-row :gutter="24">
          <el-col :span="24" class="text-left">
            <el-form-item label="审核状态：">
              <el-radio-group v-model="thisForm.status" @change="userSearchs">
                <el-radio-button
                  v-for="item in statusList"
                  :key="item.val"
                  :label="item.val"
                >{{ item.label }}</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="grid.span">
            <el-form-item label="关键字：" prop="keywords">
              <el-input v-model="thisForm.keywords" placeholder="订单号/用户昵称" clearable>
                <el-button slot="append" icon="el-icon-search" @click="userSearchs" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-table :data="lists" :loading="loading" highlight-current-row class="mt25">
        <el-table-column label="Id" min-width="80" fixed="left" #default="{row}">{{row.id}}</el-table-column>
        <el-table-column label="昵称" min-width="100" #default="{row}">{{row.nickname}}</el-table-column>
        <el-table-column label="订单号" min-width="160" #default="{row}">{{row.ordersn}}</el-table-column>
        <el-table-column label="服务项目" min-width="100" #default="{row}">{{row.itemName}}</el-table-column>
        <el-table-column label="评价内容" min-width="180" #default="{row}">{{row.content}}</el-table-column>
        <el-table-column label="评论图片" prop="image">
          <template slot-scope="{ row }">
            <el-image
              style="width: 100px; height: 100px"
              :src="row.imagesArray[0]"
              :preview-src-list="row.imagesArray"
              v-if="row.imagesArray.length > 0"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="评分" #default="{row}">{{row.serviceScore}}</el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="{ row }">
            <el-tag v-if="row.status == 0" type="info">待审核</el-tag>
            <el-tag v-else-if="row.status == 10" type="success">已通过</el-tag>
            <el-tag v-else-if="row.status == 20" type="warning">未通过</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="添加时间" min-width="150" #default="{row}">{{row.addTimeStr}}</el-table-column>
        <el-table-column label="操作" prop="action" fixed="right" min-width="200">
          <template slot-scope="{ row,index }">
            <span v-if="row.status == 0">
              <el-button type="primary" size="small" icon="el-icon-edit" @click="edit(row)">审核</el-button>
              <el-divider direction="vertical" />
            </span>
            <el-button type="text" @click="del(row ,index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="acea-row row-right page">
        <el-pagination
          :total="total"
          :current-page="thisForm.page"
          :page-size="thisForm.limit"
          layout="total, prev, pager, next, jumper"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <el-dialog 
      :visible.sync="modals"
      title="提交审核"
      width="50%"
      foothide
      @close="close"
    >
      <el-form label-width="75px">
        <el-form-item label="内容">
          <el-input type="textarea" disabled :autosize="{minRows:3,maxRows:3}" v-model="table.content"/>
        </el-form-item>
        <el-form-item >
          <el-button type="danger" @click="verify(20)">驳回</el-button>
          <el-button type="success" @click="verify(10)">通过</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getCommentListApi, orderCommentDelApi,orderCommentVerifyApi } from '@/api/onsite';
export default {
  name: 'order_comment',
  data() {
    return {
      modals:false,
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      thisForm: {
        page: 1,
        limit: 10,
        keywords: '',
        status: '',
      },
      lists: [],
      timeVal: [],
      table:{
        id:0,
        content:''
      },
      statusList: [
        { label: '全部', val: '' },
        { label: '待审核', val: '0' },
        { label: '已通过', val: '10' },
        { label: '未通过', val: '20' },
      ],
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //添加
    add() {
      this.$modalForm(orderCommentAddApi(0)).then(() => this.getList());
    },
    //订单评价列表
    getList() {
      this.loading = true;
      getCommentListApi(this.thisForm)
        .then(async (res) => {
          let data = res;
          this.lists = data.list;

          this.total = data.total;
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error(res.msg);
        });
    },
    pageChange(index) {
      this.thisForm.page = index;
      this.getList();
    },
    //修改
    edit(row) {
      this.modals = true;
      this.table.id = row.id;
      this.table.content = row.content
    },
    close(){
      this.modals = false;
      this.table = {
        id:0,
        content:''
      }
    },
    //状态审核
    verify(status) {
      let data = {
        id:this.table.id,
        status
      }
      orderCommentVerifyApi(data).then(res => {
        this.$message.success('操作成功')
        this.close();
        this.getList();
      }).catch(res =>{
        this.$message.error('操作失败')
      })
    },
    // 表格搜索
    userSearchs() {
      this.thisForm.page = 1;
      this.getList();
    },
    // 删除
    del(row) {
      this.$modalSure(`删除该条评论`).then(() => {
        orderCommentDelApi(row.id).then((row) => {
          this.$message.success('删除成功');
          this.getList();
        }).catch(err => {
          this.$message.error('删除失败')
        });
      });
    },
  },
};
</script>
  
  <style scoped lang="stylus">
  .tabBox_img {
    display: flex;
  }

  .img {
    margin-right: 5px;
  }
</style>
  
  
  
  